<template>
  <div ref="mapEl" class="chinaMap">
    
  </div>
</template>

<script>
import * as echarts from 'echarts';
import chinaJson from '@/views/cpage/maps/china.json'

export default {
  name:'chinaMap',
  props: {
    data: {
			type: Object,
			default: function () {
				return {
          qgNum:0,
          data:[]
        }
			}
		}
  },
  computed: {
    // chartData(){
    //   var sfs = [
    //     '北京','天津','上海','重庆',
    //     '河北','河南','云南','辽宁','黑龙江','湖南','安徽','山东',
    //     '新疆','江苏','浙江','江西','广西','湖北','甘肃','山西','内蒙古',
    //     '陕西','吉林','福建','贵州','广东','青海','西藏','四川','宁夏',
    //     '海南','台湾','香港','澳门','南海诸岛',
    //   ]
    //   sfs = sfs.map(item=>({
    //     name:item,
    //     num:-1,
    //     value:-1,
    //     index:-1
    //   }))
		// 	if(!this.data||this.data.length<1){
		// 		return sfs;
    //   }
    //   var len = this.data.length;
		// 	this.data.forEach(function(item,index){
    //     for(var i=0;i<sfs.length;i++){
    //       if(item.regions.indexOf(sfs[i].name)!=-1){
    //         sfs[i].value=(len-index);
    //         sfs[i].num=item.nowNumber;
    //         sfs[i].index=index+1;
    //         break;
    //       }
    //     }
		// 	})
		// 	return sfs;
    // }
    chartData(){
      return this.data;
    },
  },
  watch: {
    chartData(){
      if(this.chart){
        this.paintChart() 
      }
    },
  },
  data() {
    return {
      chart: null,
      chartTimer: null,
      colors:['#a6a6a6','#66a861','#fff96f','#db483e']
    };
  },
  mounted(){
    this.initChart();
    setTimeout(()=>{
      this.paintChart()
    })
  },
  methods: {
    resize(){
      this.chart.resize();
    },
    initChart(){
      this.chart = echarts.init(this.$refs.mapEl);
    },
    paintChart(){
      var data = this.chartData.data;
      var qgNum = this.chartData.qgNum;
      clearTimeout(this.chartTimer)
      if(!echarts.getMap('china')){
        echarts.registerMap('china',chinaJson);
      }
      this.chartTimer= setTimeout(() =>{
        if(!this.chart){
          return;
        }
        let that = this;
        let option = {
          backgroundColor:'#f2f2f2',
          grid:{
            left:0,
            top:0,
            right:0,
            bottom:150,
          },
          tooltip: {
            // triggerOn: "click",   //mousemove、click
            padding:8,
            borderWidth:1,
            borderColor:'#409eff',
            backgroundColor:'rgba(255,255,255,0.7)',
            textStyle:{
              color:'#000000',
              fontSize:14
            },
            formatter: function(e, t, n) {
              let data = e.data;
              let context = '';
              try {
                context += '<div><p><b style="font-size:15px;">'+data.name+'</b></p>';
                if(data.num>-1){
                  context+='<p class="tooltip_style"><span>'+data.num+'%</span></p>'
                }
                context+='</div>'
              } catch (error) {
                
              }
              return context;
            }
          },
          visualMap: {
            show:true,
            left: 20,
            bottom: 150,
            itemWidth:20,
            itemHeight:14,
            showLabel:true,
            textStyle:{
              color:'#333333',
              fontSize:14
            },
            pieces: [
              
              {min: 0, max: (qgNum*0.9)-1, label: '<全国值90%', color: that.colors[3]},
              {min: qgNum*0.9, max: qgNum-1, label: '全国值90%-全国值', color: that.colors[2]},
              {min: qgNum-1, label: '>=全国值', color: that.colors[1]},
              {max: 0, label: '无经销商', color: that.colors[0]},
            ]
          },
          geo: {
            map: "china",
            scaleLimit: {
              min: 1,
              max: 2
            },
            zoom: 1,
            top:10,
            bottom:140,
            label:{
              show:true,
              fontSize:14,
              color:'#333333',
            },
            itemStyle: {
              areaColor:'#a6a6a6',
              borderWidth:1,
              borderColor: "#fefefe",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
            },
            emphasis: {
              itemStyle:{
                //04317a
                areaColor:'#6dbef3',
                borderColor:'#ff0000',
              }
            },
            select: {
              itemStyle:{
                //04317a
                areaColor:'#6dbef3',
                borderColor:'#ff0000',
              }
            }
          },
          series: [
            {
              name: "区域销量",
              type: "map",
              geoIndex: 0,
              data:data
            }
          ]
        }
        this.chart.setOption(option);
        // this.chart.on('click', function (params) {
        //   params.event.stop();
        //   if (params.componentSubType === 'effectScatter') {
        //     console.log('click',params);
        //   }
        //   return false;
        // })
        this.chart.on('mouseover', function (params) {
          if(params&&params.data&&params.data.num == -1){
            params.event.stop();
          }
        })
        setTimeout(function(){
          that.chart.resize()
        },200)
      },300)
    }
  }
};
</script>